<script setup lang="ts">
import {useRouter} from 'vue-router'
import { ref, onMounted } from 'vue'
import {get} from '@/api/api'

const router = useRouter()
const userObj = ref({})
const getAccountInfo = async () => {
    const res:any = await get('/c/user/info');
    userObj.value  = res.data?.data
}
onMounted( () => {
    getAccountInfo()
})

const toPrev = () => {
    router.push('/mine')
}
</script>

<template>

  <div class="my">
    <div class="my-top">
        <div class="my-nav">
            <img src="@/assets/toPrev.png" alt=""  @click="toPrev()">
            <div class="my-item">个人信息</div>
        </div>
        <div class="content">
            <div class="contInfo"><span>头像</span><img :src="userObj.avatarUrl"></div>
            <div class="contInfo"><span>昵称</span><span class="gray">{{userObj.nickname || ''}}</span></div>
        </div>
        <div class="content">
            <div class="contInfo"><span>公司名称</span><span class="gray">{{userObj.companyName || ''}}</span></div>
            <div class="contInfo"><span>职位</span><span class="gray">{{userObj.position || ''}}</span></div>
        </div>
        <div class="content">
            <div class="contInfo1">
                <div>登录手机<span class="number">{{userObj.phoneNumber || ''}}</span></div>
                <div class="gray">登录手机修改请联系客服</div>
            </div>
        </div>
    </div>
  </div>
</template>

<style scoped>
.my{
    background-color: #f6f6f6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.my-nav{
    position: relative;
    padding-top: 25px;
    margin-bottom: 25px;
}
.my-nav img{
    position: absolute;
    left: 16px;
}
.my-top{
    padding-bottom: 20px;
}
.my-top img {
    width: 10px;
    display: inline-block;
    padding-top: 25px;
    padding-left: 5px;
    top: 0;
}
.my-item{
    text-align: center;
    width: 100%;
}
.content{
    margin: 0 16px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
}
.contInfo{
    padding: 25px 15px;
    display: flex;
    justify-content: space-between;
}
.contInfo1{
    padding: 25px 15px;
    position: relative;

}
.contInfo:first-child{
    border-bottom: 1px solid #EFEFEF;
}
.gray{
    color: #999999;
    margin-top: 6px;
    font-size: 14px;
}
.number{
    position: absolute;
    right: 16px;
    color: #999999;
    margin-top: 2px;
}
</style>
